// webgl/webgl_loader_nrrd.js
import {document,window,requestAnimationFrame,cancelAnimationFrame,Event,core,performance} from 'dhtml-weixin';
import * as THREE from '../three/Three.js';
import Stats from './jsm/libs/stats.module.js';

import { GUI } from './jsm/libs/lil-gui.module.min.js';
import { TrackballControls } from './jsm/controls/TrackballControls.js';
import { NRRDLoader } from './jsm/loaders/NRRDLoader.js';
import { VTKLoader } from './jsm/loaders/VTKLoader.js';
var requestId
Page({
	   
         onUnload() {
	   		cancelAnimationFrame(requestId, this.canvas)
this.worker && this.worker.terminate()
		setTimeout(() => {
			if (this.renderer instanceof THREE.WebGLRenderer) {
				this.renderer.dispose()
				this.renderer.forceContextLoss()
				this.renderer.context = null
				this.renderer.domElement = null
				this.renderer = null
			}
		}, 0)
        
	},
         webgl_touch(e) {
        const web_e = Event.fix(e)
        //window.dispatchEvent(web_e)
        //document.dispatchEvent(web_e)
        this.canvas.dispatchEvent(web_e)
    },
async onLoad() {
        const canvas3d = this.canvas =await document.createElementAsync("canvas","webgl")
var that = this
        let container,
        stats,
        camera,
        controls,
        scene,
        renderer;

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
        camera.position.z = 300;

        scene = new THREE.Scene();

        scene.add( camera );

        // light

        const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 1 );
        scene.add( hemiLight );

        const dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
        dirLight.position.set( 200, 200, 200 );
        scene.add( dirLight );

        const loader = new NRRDLoader();
        loader.load( 'models/nrrd/I.nrrd', async function ( volume ) {

            //box helper to see the extend of the volume
            const geometry = new THREE.BoxGeometry( volume.xLength, volume.yLength, volume.zLength );
            const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            const cube = new THREE.Mesh( geometry, material );
            cube.visible = false;
            const box = new THREE.BoxHelper( cube );
            scene.add( box );
            box.applyMatrix4( volume.matrix );
            scene.add( cube );

            //z plane
            const sliceZ = await volume.extractSlice( 'z', Math.floor( volume.RASDimensions[ 2 ] / 4 ) );
            scene.add( sliceZ.mesh );

            //y plane
            const sliceY = await volume.extractSlice( 'y', Math.floor( volume.RASDimensions[ 1 ] / 2 ) );
            scene.add( sliceY.mesh );

            //x plane
            const sliceX =await volume.extractSlice( 'x', Math.floor( volume.RASDimensions[ 0 ] / 2 ) );
            scene.add( sliceX.mesh );

            gui.add( sliceX, 'index', 0, volume.RASDimensions[ 0 ], 1 ).name( 'indexX' ).onChange( function () {

                sliceX.repaint.call( sliceX );

            } );
            gui.add( sliceY, 'index', 0, volume.RASDimensions[ 1 ], 1 ).name( 'indexY' ).onChange( function () {

                sliceY.repaint.call( sliceY );

            } );
            gui.add( sliceZ, 'index', 0, volume.RASDimensions[ 2 ], 1 ).name( 'indexZ' ).onChange( function () {

                sliceZ.repaint.call( sliceZ );

            } );

            gui.add( volume, 'lowerThreshold', volume.min, volume.max, 1 ).name( 'Lower Threshold' ).onChange( function () {

                volume.repaintAllSlices();

            } );
            gui.add( volume, 'upperThreshold', volume.min, volume.max, 1 ).name( 'Upper Threshold' ).onChange( function () {

                volume.repaintAllSlices();

            } );
            gui.add( volume, 'windowLow', volume.min, volume.max, 1 ).name( 'Window Low' ).onChange( function () {

                volume.repaintAllSlices();

            } );
            gui.add( volume, 'windowHigh', volume.min, volume.max, 1 ).name( 'Window High' ).onChange( function () {

                volume.repaintAllSlices();

            } );

        } );

        const vtkmaterial = new THREE.MeshLambertMaterial( { wireframe: false, side: THREE.DoubleSide, color: 0xff0000 } );

        const vtkloader = new VTKLoader();
        vtkloader.load( 'models/vtk/liver.vtk', function ( geometry ) {

            geometry.computeVertexNormals();

            const mesh = new THREE.Mesh( geometry, vtkmaterial );
            scene.add( mesh );
            const visibilityControl = {
                visible: true
            };
            gui.add( visibilityControl, 'visible' ).name( 'Model Visible' ).onChange( function () {

                mesh.visible = visibilityControl.visible;
                renderer.render( scene, camera );

            } );

        } );
        // renderer

        renderer = that.renderer = new THREE.WebGLRenderer({canvas:canvas3d});
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );

        container = document.createElement( 'div' );
        document.body.appendChild( container );
        container.appendChild( renderer.domElement );

        controls = new TrackballControls( camera, renderer.domElement );
        controls.minDistance = 100;
        controls.maxDistance = 500;
        controls.rotateSpeed = 5.0;
        controls.zoomSpeed = 5;
        controls.panSpeed = 2;

        stats = new Stats();
        container.appendChild( stats.dom );

        const gui = new GUI();

        window.addEventListener( 'resize', onWindowResize );

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

        controls.handleResize();

    }

    function animate() {

        requestId = requestAnimationFrame(animate);

        controls.update();

        renderer.render( scene, camera );

       // //stats.update();

    }
    }
})